<template>
    <div class="data">
        <div class="data-title">
            <div class="header_name">智慧教室统一控制台</div>
            <dv-decoration-5 class="dv-decoration-5" :color="['rgba(62, 207, 255,0.5)', 'rgba(62, 207, 255,0.5)']"
                style="width:40%;height:60px;" />
            <div class="display_flex3 decoration3">
                <dv-decoration3 class="dv-decoration31" :color="['rgba(62, 207, 255,0.5)', 'rgba(62, 207, 255,1)']"
                    style="width:250px;height:30px;" />
                <dv-decoration3 class="dv-decoration32" :color="['rgba(62, 207, 255,0.5)', 'rgba(62, 207, 255,1)']"
                    style="width:250px;height:30px;" />
            </div>
            <div class="fullscreen display_flex3 align-items bg-purple_num" @click="handlefullScreen">
                <i class="el-icon-rank"></i>{{
                    fullscreenName }}
            </div>
            <!-- <div class="title-left fl"></div>
      <div class="title-center fl"></div>
      <div class="title-right fr"></div> -->
        </div>

        <div class="data-content">
            <dv-border-box8 class="dv-border-box8" :dur="5" style="width:98%;height:98%;">
                <div class="data-content-child display_flex3 justify-items-center" style="padding-bottom:20px;">
                    <div :class="activeIndex == 1 ? 'on-data-backgImage' : 'data-backgImage'"
                        @mouseenter="handleMouseEnter(1)" @click="handleRouter(1)">
                        <div v-if="activeIndex == 1"> <img class="data-model-image" src="../../assets/img/on_icon1.png" />
                        </div>
                        <div v-else> <img class="data-model-image" src="../../assets/img/un_icon1.png" /></div>
                        <div :class="activeIndex == 1 ? 'data-title2' : 'data-title1'">录播系统与无感考勤</div>
                    </div>
                    <div :class="activeIndex == 2 ? 'on-data-backgImage' : 'data-backgImage'"
                        @mouseenter="handleMouseEnter(2)" @click="handleRouter(2)">
                        <div v-if="activeIndex == 2"> <img class="data-model-image" src="../../assets/img/on_icon2.png" />
                        </div>
                        <div v-else> <img class="data-model-image" src="../../assets/img/un_icon2.png" /></div>
                        <div :class="activeIndex == 2 ? 'data-title2' : 'data-title1'">电子班牌与中控管理</div>
                    </div>
                    <div :class="activeIndex == 3 ? 'on-data-backgImage' : 'data-backgImage'"
                        @mouseenter="handleMouseEnter(3)" @click="handleRouter(3)">
                        <div v-if="activeIndex == 3"> <img class="data-model-image" src="../../assets/img/on_icon3.png" />
                        </div>
                        <div v-else> <img class="data-model-image" src="../../assets/img/un_icon3.png" /></div>
                        <div :class="activeIndex == 3 ? 'data-title2' : 'data-title1'">电子时钟</div>
                    </div>
                    <div :class="activeIndex == 4 ? 'on-data-backgImage' : 'data-backgImage'"
                        @mouseenter="handleMouseEnter(4)" @click="handleRouter(4)">
                        <div v-if="activeIndex == 4"> <img class="data-model-image" src="../../assets/img/on_icon4.png" />
                        </div>
                        <div v-else> <img class="data-model-image" src="../../assets/img/un_icon4.png" /></div>
                        <div :class="activeIndex == 4 ? 'data-title2' : 'data-title1'">智慧通行</div>
                    </div>
                </div>
                <div class="data-content-child display_flex3 justify-items-center">
                    <div :class="activeIndex == 5 ? 'on-data-backgImage' : 'data-backgImage'"
                        @mouseenter="handleMouseEnter(5)" @click="handleRouter(5)">
                        <div v-if="activeIndex == 5"> <img class="data-model-image" src="../../assets/img/on_icon5.png" />
                        </div>
                        <div v-else> <img class="data-model-image" src="../../assets/img/un_icon5.png" /></div>
                        <div :class="activeIndex == 5 ? 'data-title2' : 'data-title1'">空调控制</div>
                    </div>
                    <div :class="activeIndex == 6 ? 'on-data-backgImage' : 'data-backgImage'"
                        @mouseenter="handleMouseEnter(6)" @click="handleRouter(6)">
                        <div v-if="activeIndex == 6"> <img class="data-model-image" src="../../assets/img/on_icon6.png" />
                        </div>
                        <div v-else> <img class="data-model-image" src="../../assets/img/un_icon6.png" /></div>
                        <div :class="activeIndex == 6 ? 'data-title2' : 'data-title1'">智能用电</div>
                    </div>
                    <div :class="activeIndex == 7 ? 'on-data-backgImage' : 'data-backgImage'"
                        @mouseenter="handleMouseEnter(7)" @click="handleRouter(7)">
                        <div v-if="activeIndex == 7"> <img class="data-model-image" src="../../assets/img/on_icon7.png" />
                        </div>
                        <div v-else> <img class="data-model-image" src="../../assets/img/un_icon7.png" /></div>
                        <div :class="activeIndex == 7 ? 'data-title2' : 'data-title1'">校园监控</div>
                    </div>
                    <div :class="activeIndex == 8 ? 'on-data-backgImage' : 'data-backgImage'"
                        @mouseenter="handleMouseEnter(8)" @click="handleRouter(8)">
                        <div v-if="activeIndex == 8"> <img class="data-model-image" src="../../assets/img/on_icon8.png" />
                        </div>
                        <div v-else> <img class="data-model-image" src="../../assets/img/un_icon8.png" /></div>
                        <div :class="activeIndex == 8 ? 'data-title2' : 'data-title1'">大数据面板</div>
                    </div>
                </div>
            </dv-border-box8>
        </div>
        <el-dialog title="提示" v-model="isShowSet" width="30%">
            <div class="el_table100 fontSize16 ">首次登录需修改浏览器设置，步骤如下：</div>
            <div class="el_table100 fontSize16 remarkValue">1：浏览器地址栏输入:<span>{{ windowurl }}</span><span
                    style="color:#0d3fca;cursor: pointer;" @mouseenter="handleCopyEnter" @click="handleCopy"
                    :data-clipboard-text="windowurl" class="tag-read" ref='copy'> 复制</span></div>
            <div class="el_table100 fontSize16 remarkValue">2：将"Block insecure private network requests"项的Default改为Disabled
            </div>
            <div class="el_table100 fontSize16 remarkValue">3：重启浏览器，重新打开页面。</div>
            <template #footer>
                <span class="dialog-footer">
                    <!-- <el-button @click="isShowSet = false">取 消</el-button> -->
                    <el-button type="primary" @click="isShowSet = false">确 定</el-button>
                </span>
            </template>
        </el-dialog>
        <!-- 智慧通行 -->
        <el-dialog title="智慧通行" v-model="smartTrafficVisible" v-if="smartTrafficVisible" width="50%" top="15%">
            <div class="display_flex2">
                <div v-for="(item, index) in smartTraffic" :key="index" class="roomNum" @click="handleSmartTraffic(item)">
                    {{ item.name }}
                </div>
            </div>
        </el-dialog>
        <!-- 精品录播教室列表 -->
        <el-dialog title="选择教室" v-model="editVisible" v-if="editVisible" width="50%" top="15%">
            <div class="paddingbottom_20">{{ activeIndex == 7 ? '校园监控' : '日新大厦' }}</div>
            <div class="display_flex2">
                <div v-for="(item, index) in classRoomList" :key="index" class="roomNum" @click="handleRoomNum(item)">
                    {{ item.roomNum }}
                </div>
            </div>
            <div class="paddingbottom_20">{{ activeIndex == 7 ? '考场监控' : '正心大厦' }}</div>
            <div class="display_flex2">
                <div class="roomNum" v-for="(item, index) in zxclassRoomList" :key="index" @click="handleAllRoom(item)">
                    {{ item.roomNum }}
                </div>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { ref, reactive, getCurrentInstance, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import api from "../../api/api";
import MD5 from "../../assets/js/w_md5";
import axios from "axios";
import Clipboard from "clipboard";
import { useRouter } from "vue-router";
let clipboard;
export default {
    components: {

    },
    setup(prop, context) {
        let { proxy } = getCurrentInstance();
        const CLASSROOM_DEVICE = ref(false);
        const isShowSet = ref(false);
        const windowurl = ref("chrome://flags/#block-insecure-private-network-requests")
        const router = useRouter();
        proxy.$permissionList("CLASSROOM_DEVICE").then((res) => {
            CLASSROOM_DEVICE.value = res;
        });
        const smartTraffic = ref([{
            name: "校门口",
            linkUrl: "http://172.16.1.74/",
            openUrl: "http://172.16.1.74/login"
        }, {
            name: "宿舍",
            linkUrl: "http://172.16.1.81/",
            openUrl: "http://172.16.1.81/login"
        }, {
            name: "教师公寓",
            linkUrl: "http://10.0.120.101/",
            openUrl: "http://10.0.120.101/login"
        }, {
            name: "日新教室门禁",
            index: 4,
            linkUrl: "http://10.0.63.150/",
            openUrl: "http://10.0.63.150/#/login"
        }, {
            name: "正心教室门禁",
            index: 5,
            linkUrl: "http://172.16.251.252/",
            openUrl: "http://10.0.63.150/#/login"
        }])
        const editVisible = ref(false);
        const smartTrafficVisible = ref(false)
        const activeIndex = ref(1);
        const classRoomList = ref([])
        const zxclassRoomList = ref([])
        const handleMouseEnter = (index) => {
            activeIndex.value = index;
        }
        const getRoomGxyList = () => {
            api
                .getListAPI("backup/roomGxy/listAll", {})
                .then((res) => {
                    if (res.data.code == 1) {
                        classRoomList.value = res.data.data;
                    } else {
                        ElMessage.error(res.data.message)
                    }
                })
        }
        const gettoken = (item) => {
            return new Promise(function (resolve, reject) {
                axios({
                    method: "GET",
                    url: item.forTokenUrl,
                    data: {},
                    headers: item.headers,
                }).then((res) => {
                    resolve(res.data.data);
                }).catch((err) => {
                    isShowSet.value = true;
                });
            });

        }
        const handleRouter = (index) => {

            let ipUrl = "";
            let openUrl = "";
            let data = {};
            let usernum = "";//登录账号
            let userpassword = "";//登录密码
            let routerUrl = "";
            if (index == 1) {
                getRoomGxyList();
                getfunData("auth/account/seeWoUrl").then((res) => {
                    zxclassRoomList.value = [{
                        type: 1,
                        roomNum: "录播系统",
                        linkUrl: res,
                    }, {
                        type: 1,
                        roomNum: "无感考勤",
                        linkUrl: "http://172.16.251.227",
                    }]
                })
                editVisible.value = true;
                // window.open("http://10.0.63.10:8088", "_blank");
            } else if (index == 5) {
                router.push("/airConditioner")
            } else if (index == 6) {
                router.push("/roomMgt")
            } else if (index == 2) {
                editVisible.value = true;
                // 海康对接请求
                // getfunData("auth/account/haikangHeaders").then((res) => {
                //     console.log(res)
                //     gettoken(res).then((resdata) => {
                //         console.log(resdata)
                //     })
                //     // zxclassRoomList.value = [{
                //     //     type: 2,
                //     //     roomNum: "总入口",
                //     //     loginUrl: res.data.data.loginUrl,
                //     //     service: res.data.data.service,
                //     //     userCode: res.data.data.userCode,
                //     // }];
                // })
                zxclassRoomList.value = [{
                    type: 1,
                    roomNum: "总入口",
                    linkUrl: "http://172.16.251.220",
                }]
                classRoomList.value = [{
                    type: 2,
                    roomNum: "电子班牌",
                    linkUrl: "http://10.0.63.99/",
                    usernum: "admin",
                    userpassword: "itc.pass",
                }, {
                    type: 3,
                    ipUrl: "10.0.63.100/",
                    roomNum: "中控管理",
                    linkUrl: "http://10.0.63.100/login",
                    openUrl: "http://10.0.63.100/login",
                    routerUrl: "/manage/device/educontrol/control-list",
                    usernum: "root",
                    userpassword: "itcroot",
                }
                ]
                // ipUrl = "http://10.0.63.99/";
                // openUrl = "http://10.0.63.99/";
                // usernum = "admin";
                // userpassword = "itc.pass";
                // getClassBrand(usernum, ipUrl)
            } else if (index == 3) {
                window.open("http://172.16.251.251:8008/WMMM_FLATFORM", "_blank")
                // ipUrl = "10.0.63.100/";
                // openUrl = "http://10.0.63.100/login";
                // routerUrl = "/manage/device/educontrol/control-list"
                // usernum = "root";
                // userpassword = "itcroot";
                // editVisible.value = true;

                // 海康对接请求
                // getfunData("auth/account/haikangHeaders").then((res) => {
                //     console.log(res)
                //     gettoken(res).then((resdata) => {
                //         console.log(resdata)
                //     })
                //     // zxclassRoomList.value = [{
                //     //     type: 2,
                //     //     roomNum: "总入口",
                //     //     loginUrl: res.data.data.loginUrl,
                //     //     service: res.data.data.service,
                //     //     userCode: res.data.data.userCode,
                //     // }];
                // })
                // zxclassRoomList.value = [{
                //     type: 1,
                //     roomNum: "总入口",
                //     linkUrl: "http://172.16.251.220",
                // }];
                // classRoomList.value = [{
                //     type: 3,
                //     ipUrl: "10.0.63.100/",
                //     roomNum: "总入口",
                //     linkUrl: "http://10.0.63.100/login",
                //     openUrl: "http://10.0.63.100/login",
                //     routerUrl: "/manage/device/educontrol/control-list",
                //     usernum: "root",
                //     userpassword: "itcroot",
                // }]
                // editVisible.value = true;
            } else if (index == 4) {
                // ipUrl = "10.0.63.100/";
                // openUrl = "http://10.0.63.100/login";
                // routerUrl = "/manage/audiovisual/radioplay/addradioplay"
                // usernum = "root";
                // userpassword = "itcroot";
                smartTrafficVisible.value = true;
            } else if (index == 7) {
                zxclassRoomList.value = [{
                    type: 1,
                    roomNum: "考场监控",
                    linkUrl: "http://10.0.3.9/",
                }]
                classRoomList.value = [{
                    type: 1,
                    roomNum: "校园监控",
                    linkUrl: "http://10.0.3.9/",
                }]
                editVisible.value = true;
                // ipUrl = "10.0.45.201/";
                // openUrl = "http://10.0.45.201/";
                // usernum = "chen";
                // userpassword = "Admin*chen123";
                // geEntranceGuardBrand(usernum, userpassword, openUrl)
            } else if (index == 8) {
                router.push("./dashboard")
                // ipUrl = "10.0.63.100/";
                // openUrl = "http://10.0.63.150/";
                // usernum = "admin";
                // userpassword = "*Xmgxy888";
                // geEntranceGuardBrand(usernum, userpassword, openUrl)
            }
            // if (index == 3) {
            //     getaccesstoken(ipUrl, openUrl, usernum, userpassword, routerUrl)
            // }
        }

        const getfunData = (url) => {
            return new Promise(function (resolve, reject) {
                api
                    .getListAPI(url, {})
                    .then((res) => {
                        if (res.data.code == 1) {
                            resolve(res.data.data)
                        } else {
                            ElMessage.error(res.data.message)
                        }
                    })
            });

        }
        const getaccesstoken = (ipUrl, openUrl, usernum, userpassword, routerUrl) => {
            axios({
                method: "POST",
                url: "http://" + ipUrl + "accessToken?company=BL&device_name=TE-0600R&actioncode=getaccesstoken&sign=BL&data%5Bclient_id%5D=20882088&data%5Bsecret%5D=nGk5R2wrnZqQ02bed29rjzax1QWRIu1O",
                data: {
                    company: "BL",
                    device_name: "TE-0600R"
                },
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                    'Access-Control-Allow-Credentials': true,
                    'Access-Control-Request-Private-Network': true,
                    Authorization: "Bearer ",
                },
            })
                .then((resdata) => {
                    if (resdata.data.data.access_token) {
                        const params = new URLSearchParams();
                        params.append('company', 'BL');
                        params.append('device_name', 'TE-0600R');
                        params.append('actioncode', 'post_login');
                        params.append('sign', resdata.data.data.access_token);
                        params.append('data[usernum]', usernum);
                        params.append('data[userpassword]', userpassword);
                        axios({
                            method: "POST",
                            url: "http://" + ipUrl + "api/login/login",
                            data: params,
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded',
                                'Access-Control-Request-Private-Network': true,
                                'Access-Control-Allow-Credentials': true,
                                Authorization: "Bearer " + resdata.data.data.access_token,
                            },
                        })
                            .then((res) => {
                                if (res.data.result == 200) {
                                    let Url = openUrl + '?token=' + res.data.data.data + '&routerUrl=' + routerUrl;
                                    // console.log(Url)
                                    window.open(Url, "_blank");
                                } else {
                                    ElMessage.error(res.data.message)
                                }
                            })
                            .catch((err) => { });
                    } else {
                        ElMessage.error(resdata.data.message)
                    }
                })
                .catch((err) => {
                    isShowSet.value = true;
                });
        }
        const getClassBrand = (usernum, ipUrl) => {
            // parseInt(new Date().getTime()/1000)
            const timestamp = parseInt(new Date().getTime() / 1000);
            // console.log(timestamp)
            let sign = MD5.hex_md5_32(MD5.hex_md5_32('adminaGrUEid@fbNM@O&L1666234120'));
            // console.log(sign)
            let url = ipUrl + "itcsaas/login?user=" + usernum + '&timestamp=1666234120' + "&sign=" + sign + "&redirect_url=/itcsaas/apps/console/#/control/home/"
            window.open(url, "_blank");
        }
        const geEntranceGuardBrand = (usernum, password, ipUrl) => {
            const timestamp = parseInt(new Date().getTime() / 1000);
            let sign = MD5.hex_md5_32(password);
            // console.log(sign)
            let url = ipUrl + '?user=' + usernum + "&passwd=" + sign + "&ismd5=true";
            console.log(url)
            // ipUrl + "itcsaas/login?user=" + usernum + '&timestamp=1666234120' + "&sign=" + sign + "&redirect_url=/itcsaas/apps/console/#/control/home/"
            window.open(url, "_blank");
        }
        const handleRoomNum = (item) => {
            // console.log(item)
            if (item.type == 2) {
                getClassBrand(item.usernum, item.linkUrl)
            } else if (item.type == 3) {
                getaccesstoken(item.ipUrl, item.openUrl, item.usernum, item.userpassword, item.routerUrl)
            } else if (item.type == 4) {
                geEntranceGuardBrand(item.usernum, item.userpassword, item.openUrl)
            } else {
                window.open(item.linkUrl, "_blank")
            }
            // let ipstr = "";
            // let ipUrl = "";
            // let pageUrl = "";
            // if (item.linkUrl.indexOf("/") != -1 && (item.linkUrl.indexOf("http:") != -1 || item.linkUrl.indexOf("https:") != -1)) {
            //     //  如果有http或者https的情况
            //     if (item.linkUrl.indexOf("http:") != -1) {
            //         ipstr = item.linkUrl.split("http://");
            //     } else if (item.linkUrl.indexOf("https:") != -1) {
            //         ipstr = item.linkUrl.split("https://");
            //     }
            //     // 如果只有斜杠的情况
            //     if (ipstr[1].indexOf('/') != -1) {
            //         // 页面路径
            //         let index = ipstr[1].indexOf("/");
            //         console.log(index)
            //         console.log(ipstr[1])
            //         pageUrl = ipstr[1].substring(index, ipstr[1].length - 1);
            //         // IP地址
            //         ipUrl = ipstr[1].substring(0, index);
            //     } else {
            //         ipUrl = ipstr[1];
            //     }
            // } else if (item.linkUrl.indexOf("/") != -1) {
            //     let index = item.linkUrl.indexOf("/");
            //     // 页面路径
            //     pageUrl = item.linkUrl.substring(index, item.linkUrl.length);
            //     // IP地址
            //     ipUrl = item.linkUrl.substring(0, index);
            // } else {
            //     ipUrl = item.linkUrl.substring(0, item.linkUrl.length);
            //     pageUrl = "";
            // }

            // if (item.linkUrl.indexOf("/") != -1 && (item.linkUrl.indexOf("http:") != -1 || item.linkUrl.indexOf("https:") != -1)) {
            //     ipUrl = item.linkUrl.match(/:(\S*)/)[1];
            //     console.log(ipUrl)
            //     let index = ipUrl.lastIndexOf("\/");
            //     ipstr = ipUrl.substring(index + 1, ipUrl.length);
            // } else if (item.linkUrl.indexOf("/") != -1) {
            //     let index = ipUrl.lastIndexOf("\/");
            //     ipstr = ipUrl.substring(0, index + 1);
            // } else {
            //     ipstr = item.linkUrl;
            // }
            // getClassRoomAccessToken(ipUrl, item, pageUrl)
        }
        const handleSmartTraffic = (item) => {
            // let routerUrl = "/index"
            // console.log(item)
            let usernum = "chen";
            let userpassword = "Chen*xy123";
            if (item.index == 4) {
                usernum = "admin";
                userpassword = "*Xmgxy888";
            }
            if (item.index == 5) {
                usernum = "zxlg";
                userpassword = "Admin*123";
            }
            geEntranceGuardBrand(usernum, userpassword, item.linkUrl)
        }
        const handleAllRoom = (item) => {
            if (item.type == 1) {
                window.open(item.linkUrl, "_blank")
            } else if (item.type == 2) {
                let linkUrl = item.loginUrl + "?userCode=" + item.userCode + "&service=" + item.service
                window.open(linkUrl, "_blank")
            } else {
                getClassBrand(item.usernum, item.linkUrl)
            }
        }
        const getClassRoomAccessToken = (ip, item, pageUrl) => {
            axios({
                method: "GET",
                url: "http://" + ip + "/accessToken?client_id=20882088&secret=nGk5R2wrnZqQ02bed29rjzax1QWRIu1O",
                data: {
                    // client_id: "20882088",
                    // secret: "nGk5R2wrnZqQ02bed29rjzax1QWRIu1O",
                },
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded',
                },
            })
                .then((resdata) => {
                    console.log(resdata)
                    if (resdata.data.data.access_token) {
                        axios({
                            method: "POST",
                            url: "http://" + ipUrl + "api/login/login?usernum=" + item.accountNum + '&userpassword=' + item.accountPassword + '&access_token=' + resdata.data.data.access_token,
                            data: {},
                            headers: {
                                'Content-Type': 'application/x-www-form-urlencoded',
                                token: resdata.data.data.access_token,
                                Authorization: "Bearer " + resdata.data.data.access_token,
                            },
                        })
                            .then((res) => {
                                if (res.data) {
                                    item.linkUrl = item.linkUrl + "?token=" + resdata.data.data.access_token + "&routerUrl=" + pageUrl
                                    window.open(item.linkUrl, "_blank");
                                } else {
                                    ElMessage.error(res.data.message)
                                }
                            })
                            .catch((err) => { });
                    }
                })
        }
        const fullscreen = ref(context.attrs.fullscreen);
        console.log(fullscreen.value)
        const fullscreenName = ref("全屏");
        // 是否包含左侧菜单
        const ismenu = ref(context.attrs.ismenu);
        let element = document.documentElement;
        if (!ismenu.value) {
            if (fullscreen.value == true) {
                fullscreenName.value = "全屏";
                if (document.exitFullscreen) {
                    document.exitFullscreen();
                } else if (document.webkitCancelFullScreen) {
                    document.webkitCancelFullScreen();
                } else if (document.mozCancelFullScreen) {
                    document.mozCancelFullScreen();
                } else if (document.msExitFullscreen) {
                    document.msExitFullscreen();
                }
            } else {
                fullscreenName.value = "退出全屏";
                if (element.requestFullscreen) {
                    element.requestFullscreen();
                } else if (element.webkitRequestFullScreen) {
                    element.webkitRequestFullScreen();
                } else if (element.mozRequestFullScreen) {
                    element.mozRequestFullScreen();
                } else if (element.msRequestFullscreen) {
                    // IE11
                    element.msRequestFullscreen();
                }
            }
        }
        const handlefullScreen = () => {
            fullscreen.value = !fullscreen.value;
            context.emit("handlefullScreen", fullscreen.value);
            if (!ismenu.value) {
                let element = document.documentElement;
                if (fullscreen.value == true) {
                    fullscreenName.value = "全屏";
                    if (document.exitFullscreen) {
                        document.exitFullscreen();
                    } else if (document.webkitCancelFullScreen) {
                        document.webkitCancelFullScreen();
                    } else if (document.mozCancelFullScreen) {
                        document.mozCancelFullScreen();
                    } else if (document.msExitFullscreen) {
                        document.msExitFullscreen();
                    }
                } else {
                    fullscreenName.value = "退出全屏";
                    if (element.requestFullscreen) {
                        element.requestFullscreen();
                    } else if (element.webkitRequestFullScreen) {
                        element.webkitRequestFullScreen();
                    } else if (element.mozRequestFullScreen) {
                        element.mozRequestFullScreen();
                    } else if (element.msRequestFullscreen) {
                        // IE11
                        element.msRequestFullscreen();
                    }
                }
                fullscreen.value = !fullscreen.value;
            }
        };
        const copy = ref(null);
        onMounted(() => {

        })
        const handleCopyEnter = () => {
            clipboard = new Clipboard(copy.value);
        }
        const handleCopy = () => {
            clipboard.on("success", (e) => {
                console.log(e)
                ElMessage.success("复制成功！")
                clipboard.destroy(); // 释放内存
            });
            clipboard.on('error', e => {
                ElMessage.error("复制失败！")
            });
        };
        return {
            copy,
            windowurl,
            isShowSet,
            activeIndex,
            fullscreen,
            fullscreenName,
            ismenu,
            editVisible, smartTrafficVisible,
            classRoomList,
            smartTraffic,
            zxclassRoomList,
            handleAllRoom,
            handleRoomNum,
            handleSmartTraffic,
            handleMouseEnter,
            handleRouter,
            handlefullScreen,
            handleCopy, handleCopyEnter
        };
    },
};
</script>
<style lang="less" scoped>
@import "../../assets/css/common.css";
@import "../../assets/css/map.css";

.container {
    width: 100%;
    padding-bottom: 20px;
}

.data {
    min-height: 890px;
    background: url("../../assets/img/bg@2x.png") no-repeat center center;
    background-size: 100% 100%;
}

.data>.data-title {
    background: url("../../assets/img/header.png") no-repeat center center;
    background-size: 100% 100%;
}

.data-content {
    // padding:0;
    background: url("../../assets/img/gxborder.png") no-repeat center center;
    background-size: 97% 97%;
    display: flex;
    flex-direction: column;
    justify-content: center;

}

.data>.data-content {
    // padding:0;

}

.data-content-child {
    // width: 96.5%;
    padding: 0 30px;
    // padding-left: 39px;
    padding-top: 39px;
    justify-content: center;
    height: 41%;
}

.data-model {
    width: 23.8%;
    height: 317px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    margin-right: 20px;
    flex: 1;
}

.data-model-image {
    width: 88px;
    height: 88px;
    position: relative;
    top: 30px;
}

.data-backgImage {
    background: url("../../assets/img/gx-model.png") no-repeat center center;
    background-size: 100% 100%;
    width: 23.8%;
    // height: 317px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    margin-left: 15px;
}

.on-data-backgImage {
    background: url("../../assets/img/on_backgImg.png") no-repeat center center;
    background-size: 100% 100%;
    width: 23.8%;
    // height: 317px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
    margin-left: 15px;
}

.data-title1 {
    // width: 83px;
    height: 19px;
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #33F3FF;
    line-height: 30px;
}

.data-title2 {
    // width: 83px;
    height: 19px;
    font-size: 20px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #fff;
    line-height: 30px;
}

.fullscreen {
    position: absolute;
    right: 30px;
    top: 25px;
    font-size: 16px;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #bdf2fd;
    text-shadow: 0px 2px 2px rgba(0, 25, 110, 0.75);
}

.roomNum {
    // width: 70px;
    padding: 20px 20px;
    border: 1px solid #d4d4d488;
    margin-right: 20px;
    margin-bottom: 20px;
    text-align: center;
    cursor: pointer;
}

.roomNum1 {
    width: 70px;
    padding: 20px 0px;
    border: 1px solid #d4d4d488;
    margin-right: 20px;
    margin-bottom: 20px;
    text-align: center;
    cursor: pointer;
}

.roomNum:hover {
    background: #1042cc69;
    color: #fff;
}

.dv-decoration-5 {
    position: absolute;
    bottom: 0;
    left: 30%;
    right: 0;
}

.decoration3 {
    width: 100%;
    bottom: 55px;
    position: absolute;
    justify-content: space-around;
}

.dv-decoration31 {
    left: 130px;
    position: absolute;
}

.dv-decoration32 {
    right: 130px;
    position: absolute;
}

&:deep(.dv-border-box8) {
    margin-left: 1% !important;
    margin-top: 1% !important;
}
</style>
  